<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Popconfirm 气泡确认框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">Popconfirm 的属性与 Popover 很类似， 因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。</p>
	<p class="desc">在 Popconfirm 中，只有 title 属性可用，content 属性会被忽略。</p>
	<el-popconfirm title="确定删除吗？" @confirm="confirmEvent" @cancel="cancelEvent">
		<template #reference>
			<el-button>Delete</el-button>
		</template>
	</el-popconfirm>
	
	
	<el-divider content-position="left">自定义弹出框的内容</el-divider><!-- =============================================================== -->
	<p class="desc">可以在 Popconfirm 中自定义内容。</p>
	<el-popconfirm width="320px" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="Icons.InfoFilled" icon-color="#626AEF" title="确定删除吗？">
		<template #reference>
			<el-button>Delete</el-button>
		</template>
	</el-popconfirm>
	
	<el-divider content-position="left">多种让 Popconfirm 出现的方法</el-divider><!-- =============================================================== -->
	<p class="desc">点击按钮触发事件</p>
	<el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF" title="确定删除吗？" @confirm="confirmEvent" @cancel="cancelEvent">
		<template #reference>
			<el-button>Delete</el-button>
		</template>
	</el-popconfirm>
	
	
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			message: 'Hello Vue!!'
		}
	},
	methods:{
		confirmEvent(){
			console.log('confirmEvent');
		},
		cancelEvent(){
			console.log('cancelEvent');
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>